<template>
  <div>
    <!-- tabs -->
    <BaseHScroll :current-component="tabComponent" :scroll-list="tabs" @onScrollItemClick="onScrollItemClick" />
    <component :is="currentComponent" v-if="tabs.length>0" :current-data="currentData" @currentClick="currentClick" />
  </div>
</template>

<script>
import TabItem from './tabItem'

export default {
  name: 'BaseHTabs',
  props: {
    tabs: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentData: { },
      currentComponent: {},
      tabComponent: TabItem
    }
  },
  watch: {
    tabs(newValue) {
      if (newValue && newValue.length > 0) {
        this.currentComponent = newValue[0].component
        this.currentData = newValue[0]
      }
    }
  },

  created() {
  },
  mounted() {
  },
  methods: {

    onScrollItemClick(data) {
      this.currentTabComponent = data.component
      this.currentData = data
      this.$emit('onTabChange', data)
    },
    currentClick(data) {
      console.log('currentClick:', data)
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
